<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>充值</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
          <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"
        type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.js"
        type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<style type="text/css">
	*,h3{margin:0;padding:0;}
	
	.clearfix{
		overflow:hidden;
	}
	.lt{
		float:left;
	}
	.rt{
		float:right;
	}
	.wraper{
		margin:0 auto;
		width:560px;
		
	}
	
	li{
		padding:16px 10px;
		border-bottom:1px solid #eeeeed;
		font-size:16px;
		color:#666;
	}
	.pay{
		color:#333;
	}
	.number{
		font-size:20px;
		
	}
	.password{
		border:1px solid #ccc;
		padding:5px 0px;
		text-align:center;
		border-radius:4px;
	}
	.password input{
		width:77px;
		height:40px;
		border:none;
		border-right:1px solid #ccc;
		outline:none;
		text-align:center;
		font-size:18px;
	}
	.wraper .password .int{
		border:none;
	}
	.tab{
		padding:0;
		width:560px;
		margin:0 auto;
		border-bottom:1px solid #ccc;
		border-radius:4px;
		background:#f6f6f7;
	}
	.tab li{
		width:33%;
		text-align:center;
		border:none;
		padding:10px;
		cursor:pointer;
		font-size:20px;
		font-weight:600;
	}
	.tab .tab_center{
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
	}
	.tab1 ul{
		width:500px;
		margin:0 auto;
	}
	.tabs{
		float:left;
		margin:0 30px;
		
	}
	.tab2{
		display:none;
	}
	.tab3{
        display:none;
	}
	.wraper .tab .active{
		background:#fff;
		color:#1681de;
	}
	.choose_payway{
		border-bottom:1px solid #eeeeed;
		padding:20px 0;
	}
	.choose_payway label{
		margin:6px;
	}
	.choose_bank{
		display:inline-block;
		padding:10px;
		border:1px #eeeeed solid;
		border-radius:6px;
	}
	.choose_bank img{
		margin-right:20px;
	}
	.addbank{
		width:210px;
		margin-left:26px;
		color:#428edf;
		cursor:pointer;
	}
	.pay{
		border-bottom:1px solid #eeeeed;
	}
	.tab2 .pay{
		width:500px;
		margin:0 auto;
		padding:20px 10px;
	}
	.tab2 .pay img{
		vertical-align:middle;
	}
	.pay span{
		display:inline-block;
		width:370px;
		margin-left:20px;
		font-size:24px;
	}
	.foot{
		margin-top:20px;
	}
	.foot input{
		margin:0 10px;
		border-color:bdbdbd;
	}
	p{
		padding-left:10px;
	}
	</style>
<body>
<div class="wraper">
    <ul class="tab clearfix">
	   <li class="lt active">我的钱包</li>
	   <li class="lt tab_center">第三方支付</li>
	   <li class="lt">银行快捷支付</li>
	</ul>
	<div class="clearfix" style="position:relative;">
	  <div class="tab1 tabs">
		<ul>
			<li class="clearfix">
				<div class="lt">支付项目</div>
				<div class="rt">${cname }</div>
			</li>
			<li class="clearfix">
				<div class="lt">零钱余额</div>
				<div class="rt">￥${amount }</div>
			</li>
			<li class="clearfix pay">
				<div class="lt">支付金额</div>
				<div class="rt number">￥${orderAmount}</div>
			</li>
		</ul>
		<div style="margin-top:10px;">
			<p>平台支付密码</p>
			<div class="password">
				<input maxlength="1" type="password" name="input1" id="password1"/>
				<input maxlength="1" type="password" name="input2" id="password2"/>
				<input maxlength="1" type="password" name="input3" id="password3"/>
				<input maxlength="1" type="password" name="input4" id="password4"/>
				<input maxlength="1" type="password" name="input5" id="password5"/>
				<input maxlength="1" class="int" type="password" name="password6" id="password6"/>
			</div>
			<div class="clearfix" style="line-height:30px;font-size:14px;padding-bottom:20px;border-bottom:1px solid #eeeeed">
				<div class="lt" style="color:#999999;">*请输入6位数密码</div>
				<div class="rt">
					<a style="color:#6ba7f1">忘记密码？</a>
				</div>
			</div>
			<div class="foot">
			 <input type="button" style="width:100px;font-size:16px !important;margin-top: 10px;background:#f1f1f1 !important;color:#666 !important" class="btn rt" value="确定支付"/>

			 <input type="button" style="width:100px;font-size:16px !important;margin-top: 10px;background:#f1f1f1 !important; color:#666 !important" class="btn rt" value="取消"/>
		</div>
		  </div>
	    </div>
		<div class="tab2 tabs">
			<div class="clearfix pay" onclick="payThird('10001')">
				<img class="" src="${pageContext.request.contextPath}/static/images/admin/wallet/zfb1.jpg" />
				<span class="">支付宝</span>
				<img class="" src="${pageContext.request.contextPath}/static/images/admin/wallet/rt1.jpg" />
			</div>
	  
			<div class="clearfix pay" style="border:none; onclick="payThird('10002')">
				<img class="" src="${pageContext.request.contextPath}/static/images/admin/wallet/wx1.jpg" />
				<span class="">微信</span>
				<img class="" src="${pageContext.request.contextPath}/static/images/admin/wallet/rt1.jpg" />
			</div>
		  
		</div>
		<div class="tab3 tabs">
		   <div class="choose_payway">
		       <p>选择支付银行</p>
			   <label>
			      <input type="radio" name="name"/>
				  <div class="choose_bank">
				     <img src="${pageContext.request.contextPath}/static/images/admin/wallet/yh.jpg" alt=""/>
				     <span>**3399</span>
				  </div>
			   </label>
			    <label>
			      <input type="radio" name="name"/>
				  <div class="choose_bank">
				     <img src="${pageContext.request.contextPath}/static/images/admin/wallet/yh.jpg" alt=""/>
				     <span>**3399</span>
				  </div>
			   </label>
			     <label>
			      <input type="radio" name="name"/>
				  <div class="choose_bank">
				     <img src="${pageContext.request.contextPath}/static/images/admin/wallet/yh.jpg" alt=""/>
				     <span>**3399</span>
				  </div>
			   </label>
			   <div class="choose_bank addbank">
				    +添加银行卡
				</div>
		   </div>
		   <ul>
			<li class="clearfix">
				<div class="lt">支付项目</div>
				<div class="rt">红包名称</div>
			</li>
			<li class="clearfix pay">
				<div class="lt">支付金额</div>
				<div class="rt number">￥1000.00</div>
			</li>
		</ul>
		<div>
			<p>平台支付密码</p>
			<div class="password">
				<input maxlength="1" type="password" name="input1" id="input11"/>
				<input maxlength="1" type="password" name="input2" id="input21"/>
				<input maxlength="1" type="password" name="input3" id="input31"/>
				<input maxlength="1" type="password" name="input4" id="input41"/>
				<input maxlength="1" type="password" name="input5" id="input51"/>
				<input maxlength="1" class="int" type="password" name="input61"/>
			</div>
			<div class="clearfix" style="line-height:30px;font-size:14px;padding-bottom:20px;">
				<div class="lt" style="color:#999999;">*请输入6位数密码</div>
				<div class="rt">
					<a style="color:#6ba7f1">忘记密码？</a>
				</div>
			</div>
			
		  </div>
		</div>
	</div>	
</div>	 
<script type="text/javascript">
var departid = '10004';//默认使用钱包支付
var orderId =  '${orderId}';
   $(".tab1").show();
   $(".tab li").click(function(){
	   departid = $(this).attr('data-departid');
	   var num=$(".tab li").index(this);
	   $(this).addClass("active").siblings().removeClass("active");
       $(".tabs").eq(num).show().siblings().hide(); 
   })
   
  $(".password #input1").focus();
  
   $("input[name^='input']").each(function(){
	   $(this).keyup(function(e){
		    e = window.event || e;
                var k = e.keyCode || e.which;
                if (k == 8) {   //8是空格键
                    if ($(this).val().length < 1) {
                        $(this).prev().focus();
                        $(this).prev().focus(function() {
                            var obj = e.srcElement ? e.srcElement: e.target;
                            if (obj.createTextRange) { //IE浏览器
                                var range = obj.createTextRange();
                                range.moveStart("character", 4);
                                range.collapse(true);
                                range.select();
                            }
                        });
                    }
                } else {
                    if ($(this).val().length == 1) {
                        $(this).next().focus();
                    }
                }
            })
	   }) 
	   
   </script>
</body>
</html>
